<template>
	<div>
		<header>
			<span class = "iconfont menu" @click = "navIsShow = true">&#xe790;</span>
			<h1>{{title}}</h1>
			<span class = "iconfont search" @click = "search">&#xe632;</span>
		</header>
		<transition>
			<nav v-show = "navIsShow" @click = "navIsShow = false">
				<ul>
					<li @click = "change('一个图文','/one')">图文</li>
					<li @click = "change('一个阅读','/read')">阅读</li>
					<li @click = "change('一个音乐','/music')">音乐</li>
					<li @click = "change('一个影视','/movie')">影视</li>
					<li @click = "change('App下载','/download')">App下载</li>
					<li @click = "change('关于一个','/about')">关于</li>
				</ul>
			</nav>
		</transition>
	</div>
</template>	
<script>
import { mapMutations } from 'vuex'
export default {
	name : 'topHeader',
	props : ["title"],
	data () {
		return {
			navIsShow:false
		}
	},
	methods : {
		...mapMutations(["changeTitle"]),
		search () {
			this.$emit('change','search');
		},
		change (title,routePath) {
			this.changeTitle(title);
			this.$router.push(routePath)
		}
	}
}
</script>

<style lang = "less" scoped>
	header {
		width:100%;
		height:.88rem;
		line-height:.88rem;
		position: fixed;
		left:0;
		top:0;
		z-index:99;
		display: flex;
		background:#fff;
		span {
			font-size:.44rem;
			width:.8rem;
			text-align: center;
		}
		.menu {
			float:left
		}
		.search {
			float:right;
		}
		h1 {
			flex:1;
			text-align:center;
			font-size:.32rem;
		}
	}
	nav {
		width:100%;
		height:100vh;
		position: fixed;
		left:0;
		top:0;
		z-index:99;
	}
	ul {
		width:50%;
		height:100%;
		background: #fff;
		padding-top:.88rem;
		box-sizing: border-box;
		box-shadow: .1rem 0 .1rem rgba(0,0,0,.15);
		li {
			width:100%;
			height:1rem;
			line-height:1rem;
			text-align:center;
			font-size:.32rem;
			color:rgba(0, 0, 0, 0.6);
		}
	}
	.v-enter,.v-leave-to {
		left:-50%;
	}
	.v-enter-active, .v-leave-active {
		transition: left .3s;
	}
</style>